<template>
  <div>
    <div flex="cross:center">
      <div style="padding-left: 30px;">
        <el-switch
              v-model="horizontal"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        是否是横向
      </div>
      <div style="padding-left: 30px;">
        <el-switch
              v-model="collapsable"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>  
        可展开收起
      </div>
      <div style="padding-left: 30px;">
        <el-switch
              v-model="expandAll"
              active-color="#13ce66"
              inactive-color="#ff4949" @change="handleExpandAll">
          </el-switch>  
        展开全部
      </div>
      <div style="padding-left: 30px;">
        背景色：
        <el-color-picker v-model="style.background" size="small"></el-color-picker>
        &nbsp;
        文字颜色：
        <el-color-picker v-model="style.color" size="small"></el-color-picker> 
        &nbsp;
      </div>
    </div>
    
    <br>
      <b-tree-org
        ref="treeOrg"
        :data="data"
        :horizontal="horizontal"
        :collapsable="collapsable"
        :label-style="style"
        @node-click="handleNodeClick"
        @toggle-expand="handleExpand" />

  </div>
</template>

<script>
export default {
  data() {
    return {
        data: {
          id: 0,
          label: "xxx科技有限公司",
          expand: true,
          children: [
              {
              id: 2,
              label: "产品研发部",
              expand: true,
              style: {
                  background: '#fafafa',
                  color: '#1089ff'
              },
              children: [
                  { id: 5, label: "研发-前端" },
                  { id: 6, label: "研发-后端" },
                  { id: 9, label: "UI设计" },
                  { id: 10, label: "产品经理" }
              ]
              },
              {
              id: 3,
              label: "销售部",
              expand: true,
              children: [
                  { id: 7, label: "销售一部" },
                  { id: 8, label: "销售二部" }
              ]
              },
              { id: 4, label: "财务部" },
              { id: 9, label: "HR人事" }
          ]
        },
          horizontal: true,
          collapsable: true,
          expandAll: true,
          style: {
          background: '#fff',
          color: '#5e6d82'
        }
    }
  },
  methods: {
  handleExpandAll(value) {
      if (value) {
      this.$refs.treeOrg.expandAll()
      } else {
      this.$refs.treeOrg.collapseAll()
      }
  },
  handleNodeClick(node) {
      console.log('handleNodeClick: ', node)
  },
  handleExpand(node) {
      console.log('handleExpand: ', node)
  }
  }
}
</script>